<template>
  <el-container>
    <el-header>
      <div class="header">
        <div class="collapse-btn" @click="collapseChage">
          <i v-if="!collapse" class="el-icon-s-fold"></i>
          <i v-else class="el-icon-s-unfold"></i>
        </div>
        <!-- 第三步 LOGO -->
        <div class="logo">Money 证券交易系统</div>

        <!-- 第四步  右侧下拉菜单-->
        <div class="header-right">
          <div class="header-user-con">
            <el-avatar :src="avatarImg"></el-avatar>
            <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{username}}
                        <i class="el-icon-caret-bottom"></i>
                    </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="loginOut">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </el-header>
  </el-container>

</template>

<script>

import avatarImg from '@/assets/img/img.jpg'
import {logOut} from "../api/loginApi";

export default {
  name: "Header",
  data() {
    return {
      collapse: true,
      fullscreen: false,
      message: 2,
      avatarImg : avatarImg
    };
  },
  computed: {
    username() {
      let acc = sessionStorage.getItem("uid");
      return acc ? acc : "guest";
    }
  },
  methods: {
    // 用户名下拉菜单选择事件
    handleCommand(command) {
      if (command == 'loginOut') {
        logOut(this.logoutCallback)
      }
    },
    logoutCallback(code, msg, data) {
      if (code == 200) {
        sessionStorage.removeItem("token")
        sessionStorage.removeItem("uid")
        this.$message.success('退出成功~')
        this.$router.replace({path: '/'})
      }else {
        this.$message.error(msg)
      }
    },
    // 侧边栏折叠
    collapseChage() {
      this.collapse = !this.collapse;
      this.$bus.emit('collapse', this.collapse);
    },
  },

  // 第五步  右侧下拉菜单
  mounted() {
    if (document.body.clientWidth < 1500) {
      this.collapseChage();
    }
  }
}
</script>

<style scoped>
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
  background-color: rgb(50, 65, 87);
  color: #fff;
}

.collapse-btn {
  float: left;
  padding: 0 21px;
  cursor: pointer;
  line-height: 70px;
}

.el-header {
  padding: 0 0;
}

.header .logo {
  float: left;
  width: 250px;
  line-height: 70px;
}

.header-right {
  float: right;
  padding-right: 50px;
}

.header-user-con {
  display: flex;
  height: 70px;
  align-items: center;
}

.user-name {
  margin-left: 10px;
}

.user-avator {
  margin-left: 20px;
}

.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}

.el-dropdown-menu__item {
  text-align: center;
}

</style>
